<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合排名</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="author" content="duanliang, duanliang920.com" />
    <style>
        body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}
        .viewport{ max-width:640px; min-width:300px; margin:0 auto;}
    </style>

    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="../js/jweixin-1.2.0.js"></script>
    <script src="../js/config.js"></script>
    <script>
        $(document).ready(function () {
            $.getJSON("/map/getConfig/", function (json) {
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: configAppId, // 必填，公众号的唯一标识
                    timestamp: json.timeStamp, // 必填，生成签名的时间戳
                    nonceStr: json.nonceStr, // 必填，生成签名的随机串
                    signature: json.signature,// 必填，签名
                    jsApiList: [
                        'openLocation',
                        'getLocation'
                    ] // 必填，需要使用的JS接口列表，所有JS接口列表见官方文档附录2
                });
                wx.ready(function () {
                    console.log("this is ready");
                });
                wx.error(function (res) {
                    console.log("this is error");
                });
            });

            function compare(property) {
                return function(a, b) {
                    var value1 = a[property];
                    var value2 = b[property];
                    return value2 - value1;
                }
            }

            $.getJSON("/map/getOpenId/", function (json) {
                openId = json.openId;
                var user={openId:openId};
                $.ajax({
                    type: "get",
                    url: urlToUser+"/user/getUserByOpenId1/"+openId,
                    data: user,
                    dataType: "json",
                    success: function (data) {
                        var clazzId=data.clazzid;
                        $.ajax({
                            type: "get",
                            url: "/ranking/getAbilityList/"+clazzId,
                            data: clazzId,
                            dataType: "json",
                            success:function (data) {
                                var json = data.sort(compare("performAbility"));
                                console.log(json)
                                for(var i in json){
                                    var id=data[i].userId;
                                    $.ajax({
                                        type: "get",
                                        url: "/ranking/getUserById/"+id,
                                        async:false,
                                        data: id,
                                        dataType: "json",
                                        success:function (json) {
                                            var userName=json.name;
                                           var j=parseInt(i)+1;
                                            var html = "";
                                                html += "<tr>";
                                                html +=     "<td align='center'>" + j + "</td>"
                                                html +=     "<td align='center'>" + userName+ "</td>"
                                                html +=     "<td align='center'>" + data[i].performAbility + "</td>"
                                                html += "</tr>";
                                                $("#alternatecolor").append(html);
                                        }
                                    })

                                }
                                altRows('alternatecolor');
                            }
                        })
                    }
                })
            });

        })
    </script>

    <script type="text/javascript">
        function altRows(id){
            if(document.getElementsByTagName){

                var table = document.getElementById(id);
                var rows = table.getElementsByTagName("tr");

                for(i = 0; i < rows.length; i++){
                    if(i % 2 == 0){
                        rows[i].className = "evenrowcolor";
                    }else{
                        rows[i].className = "oddrowcolor";
                    }
                }
            }
        }
    </script>

    <style type="text/css">
        table.altrowstable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #a9c6c9;
            border-collapse: collapse;
        }
        table.altrowstable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #a9c6c9;
        }
        table.altrowstable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #a9c6c9;
        }
        .oddrowcolor{
            background-color:#d4e3e5;
        }
        .evenrowcolor{
            background-color:#c3dde0;
        }
    </style>


</head>
<body>
<table  class="altrowstable" id="alternatecolor" border="1" cellspacing="0" cellpadding="3">
    <tr>
        <td align="center" colspan="3"><h1><b>个人综合能力排行榜</b></h1></td>
    </tr>
    <tr>
        <th  style="width: 100px">名次</th>
        <th  style="width: 100px">姓名</th>
        <th  style="width: 100px">综合能力<br/>(0-100)</th>
    </tr>
</table>
</body>
</html>